/*
 * @Description: 红包记录
 * @Author: kanglin
 * @Date: 2018-07-19 09:29:55
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@pad-radio: 10rem/1536;
	@phone-radio: 10rem/750;
    .v__luck__money__record{
		// background-color:
		background-image: linear-gradient(45deg,#6f0bb5, #b3267e );
		height: 100%;
		position: relative;
		// top: 0;
		width: 100%;
		// bottom: 0;

		.header{
			text-align: center;
			width: 100%;
			color: #ffffff;
		}

		.person{
			position: absolute;
			bottom: 0;
			height: 554*@pad-radio;
			width: 716*@pad-radio;
			left: 50%;
			transform: translateX(-50%);
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/renwu_.png');
		}
		.record{
			// width: 1338* @pad-radio;
			// margin: 92* @pad-radio auto 0;
			position: absolute;
			top: 172 *@pad-radio;;
			right: 110 *@pad-radio;
			left: 110 *@pad-radio;
			bottom: 136*@pad-radio;
		}
        .record__header{
			background: #e75385;
			height: 128*@pad-radio;
			position: relative;
			border-radius: 30*@pad-radio 30*@pad-radio 0 0;
		}
		.record__header__avantar{
			position: absolute;
			display: block;
			left: 50%;
			transform: translateX(-50%);
			width: 180* @pad-radio;
			height:180* @pad-radio;
			border: 2px solid #e75385;
			background: #eeeeee;
			top: -92* @pad-radio;
			border-radius: 50%;
			overflow: hidden;
			background-size: 100%;
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/default-avantar.jpg');
			&>img{
				width: 100%;
			}
		}
		.record__content{
			background: rgba(255, 255, 255, .65);
			position: absolute;
			top: 128* @pad-radio;
			bottom: 0;
			width: 100%;
			border-radius:  0 0 30*@pad-radio 30*@pad-radio;
		}
        .record__content__list{
			overflow: auto;
			position: absolute;
			top: 126 * @pad-radio;
			left: 0;
			right: 0;
			bottom: 0 * @pad-radio;
			margin: 0 90*@pad-radio;
			// height: 500px;
        }
        .record__content__list__item{
			height: 110* @pad-radio;
			line-height: 110* @pad-radio;
			position: relative;
        }
        .item__date{
			display: inline-block;
			font-size: 36* @pad-radio;
			padding: 0 20* @pad-radio;
			vertical-align: top;
			color: #666666;
        }
        .item__date__amount{
			display: inline-block;
			position: absolute;
			right: 0;
			color: #ad95a7;
			font-size: 36* @pad-radio;
        }
        .item__step{
            display: inline-block;
            width: 18* @pad-radio;
            height: 18* @pad-radio;
            background: #c60b2c;
            border-radius: 50%;
            vertical-align: 20%;
            position: relative;
            line-height: 100%;
        }

        .item__step::before{
            content: '';
            position: absolute;
            display: inline-block;
            width: 1px;
            height: 55* @pad-radio;
            background: #c60b2c;
            left: 50%;
			transform:translate(-50%, -100%);
        }
        .item__step::after{
            content: '';
            position: absolute;
            display: inline-block;
            width: 1px;
            height: 55* @pad-radio;
            background: #c60b2c;;
			left: 50%;
			transform: translate(-50%, 0);
        }
        .record__content__list__item:last-child .item__step::after{
            display: none;
        }

        .record__content__list__item:first-child .item__step::before{
            display: none;
		}

		.record__content__amount{
			text-align: center;
			font-size: 32* @pad-radio;
			line-height: 32* @pad-radio;
			padding-top: 36*@pad-radio;
			margin-bottom: 60* @pad-radio;
			vertical-align: middle;
		}
		.item__date__amount{
			line-height: 110* @pad-radio;
		}
		.item__date__amount__money, .record__content__amount__money{
			color: #c60b2c;
		}
	}

	/* pad */
	.v__luck__money__record.pad{
		.header{
			height: 100 *@pad-radio;
			line-height: 100 *@pad-radio;
			font-size: 40 *@pad-radio;
		}
		.person{
			height: 554*@pad-radio;
			width: 716*@pad-radio;
		}
		.record{
			top: 192 *@pad-radio;;
			right: 110 *@pad-radio;
			left: 110 *@pad-radio;
			bottom: 136*@pad-radio;
		}
        .record__header{
			height: 128*@pad-radio;
			border-radius: 30*@pad-radio 30*@pad-radio 0 0;
		}
		.record__header__avantar{
			width: 180* @pad-radio;
			height:180* @pad-radio;
			top: -92* @pad-radio;
		}
		.record__content{
			top: 128* @pad-radio;
			border-radius:  0 0 30*@pad-radio 30*@pad-radio;
		}
        .record__content__list{
			top: 126 * @pad-radio;
			bottom: 60 * @pad-radio;
			margin: 0 90*@pad-radio;
			// height: 500px;
        }
        .record__content__list__item{
			height: 110* @pad-radio;
			line-height: 110* @pad-radio;
        }
        .item__date{
			font-size: 36* @pad-radio;
			padding: 0 20* @pad-radio;
			line-height:  110* @pad-radio;
        }
        .item__date__amount{
			font-size: 36* @pad-radio;
        }
        .item__step{
            width: 18* @pad-radio;
            height: 18* @pad-radio;
        }

        .item__step::before{
            height: 55* @pad-radio;
        }
        .item__step::after{
            height: 55* @pad-radio;
        }
		.record__content__amount{
			font-size: 32* @pad-radio;
			line-height: 32* @pad-radio;
			padding-top: 36*@pad-radio;
			margin-bottom: 60* @pad-radio;
		}
		.item__date__amount{
			line-height: 110* @pad-radio;
		}
	}

	/* 小屏幕 */
	.v__luck__money__record.phone{
		.header{
			height: 100 *@phone-radio;
			font-size: 40 *@phone-radio;
			line-height: 100 *@phone-radio;

		}
		.person{
			height: 356*@phone-radio;
			width: 460*@phone-radio;
		}
		.record{
			position: absolute;
			top: 108 *@phone-radio;
			right: 36 *@phone-radio;
			left: 36 *@phone-radio;
			bottom: 54*@phone-radio;
		}
        .record__header{
			height: 90*@phone-radio;
			border-radius: 46*@phone-radio 46*@phone-radio 0 0;
		}
		.record__header__avantar{
			width: 148* @phone-radio;
			height: 148* @phone-radio;
			top: -76* @phone-radio;
		}
		.record__content{
			top: 90*@phone-radio;
			border-radius:  0 0 46*@phone-radio 46*@phone-radio;
		}
        .record__content__list{
			top: 96 * @phone-radio;
			bottom: 60 * @pad-radio;
			margin: 0 90*@pad-radio;
        }
        .record__content__list__item{
			height: 78* @phone-radio;
			line-height: 110* @phone-radio;
        }
        .item__date{
			font-size: 30* @phone-radio;
			line-height: 78* @phone-radio;
        }
        .item__date__amount{
			font-size: 30* @phone-radio;
        }
        .item__step{
            width: 18* @phone-radio;
			height: 18* @phone-radio;
			vertical-align: 70%;
        }

        .item__step::before{
            height: 39* @phone-radio;
        }
        .item__step::after{
            height: 39* @phone-radio;

        }

		.record__content__amount{
			font-size: 30* @phone-radio;
			line-height: 1;
			padding-top: 32*@phone-radio;
			margin-bottom: 68* @phone-radio;
		}
		.item__date__amount{
			line-height: 78* @phone-radio;
		}
	}
</style>

<template>
	<div
		:class="{pad: is_wide_screen, phone:!is_wide_screen}"
		class="v__luck__money__record">

		<!-- <div
			v-if="is_wide_screen"
			class="header">
			红包记录
		</div>

		<back
			v-if="is_wide_screen"
			path="/lucky-money" /> -->

		<div class="person"/>
		<div class="record">
			<div class="record__header">
				<div class="record__header__avantar">
					<img
						:src="avantar"
						alt="">
				</div>
				<!-- <p>领取红包记录</p> -->
			</div>
			<div class="record__content">
				<p class="record__content__amount">
					红包总金额:
					<span class="record__content__amount__money">
						￥{{ total_amount }}
					</span>
				</p>
				<ul class="record__content__list">
					<li
						v-for="(item) in bonuses"
						:key="item.id"
						class="record__content__list__item">
						<i class="item__step"/>
						<div class="item__date">
							{{ item.created_at | formatDate }}
						</div>
						<div class="item__date__amount">
							领取红包:
							<span class="item__date__amount__money">
								￥{{ Number(item.amount).toFixed(2) }}
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { parseQueryString } from 'src/utils/helper';
import API_LIST from 'src/API_LIST';
import back from '../back';

export default {
	name: 'LuckMoneyRecord',
	components: {
		back,
	},
	filters: {
		/**
		 *  格式化时间
		 * @param {string} date {返回时间}
		 * @return {String}
		 */
		formatDate(date) {
			if (date) {
				const month = date.substring(5, 7);
				const day = date.substring(8, 10);
				return `${month}月${day}日`;
			}
			return '';
		},
	},
	data() {
		return {
			bonuses: [],
			avantar: null,
			total_amount: 0.00,
			is_wide_screen: true,
			is_store_admin: true,
		};
	},
	created() {
		this.initData();
	},
	mounted() {
		this.is_wide_screen = this.isWideScreen();
	},
	methods: {

		/**
		 * 判断屏幕宽
		 * @return {boolean}
		 */
		isWideScreen() {
			const admin_id = this.resolveStoreAdminIdFormApp();
			return !!admin_id;
		},

		/**
		 * 解析 用户id
		 * @return {undefined}
		 */
		initData() {
			let { store_admin_id } = parseQueryString(); // query 参数
			const { openid } = parseQueryString();
			store_admin_id = this.resolveStoreAdminIdFormApp() || store_admin_id; // 前端路由
			if (openid) { // 测肤(微信)用户
				this.is_store_admin = false;
				this.fetchWechatUserRecords(openid);
			} else if (store_admin_id) { // 店员
				this.is_store_admin = true;
				this.fetchStoreAdminRecords(store_admin_id);
			} else {
				const toast = this.$createToast({
					type: 'warn',
					time: 2000,
					txt: '参数错误',
				});
				toast.show();
			}
		},

		/**
		 * 解析路由参数
		 * @return {String} {店员id}
		 */
		resolveStoreAdminIdFormApp() {
			const { store_admin_id } = this.$route.query;
			return store_admin_id;
		},

		/**
		 * 获取店员数据
		 * @param {String} id {用户id}
		 * @return {undefined}
		 */
		fetchStoreAdminRecords(id) {
			this.$http.get(`${API_LIST.BONUS}/${id}`)
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.bonuses = data.bonuses;
						this.avantar = data.headimgurl;
						this.total_amount = data.total_amount;
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'warn',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				});
		},

		/**
		 * 获取微信用户数据
		 * @param {String} open_id {唯一标识}
		 * @return {undefined}
		 */
		fetchWechatUserRecords(open_id) {
			this.$http.get(`${API_LIST.WECHAT_USER_BONUSES}/${open_id}`)
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.bonuses = data.bonuses;
						this.avantar = data.headimgurl;
						this.total_amount = data.total_amount;
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'warn',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				});
		},
	},
};
</script>
